﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<style type="text/css">
    #Lunch
    {
        /*margin: 0;
        padding: 0;*/
        height: 100%;
        
       /*display:none;*/
    }
     #3rdShift
    {
      /* margin: 0;
        padding: 0;*/
        height: 100%;
        
       /*display:none;*/
    }
    #drag{
	/*border: 2px dashed LightBlue;*/
	display: table;
}

/* table */
div#drag table {
	background-color: #eee;
	border-collapse: collapse;
	margin: 7px;	
}

/* table cells */
div#drag td{
	border: 1px solid navy;
	height: 50px;
	text-align: center;
	font-size: 10pt;
	padding: 2px;
}

/* drag object (DIV inside table cell) */
.drag{
	margin: auto;
	text-align: center;
	width: 87px;
	height: 35px;
	line-height: 35px;
	border: 2px solid SteelBlue;
	background-color: white;
}
</style>

<script>

    $(function () {
        $("#accordion").accordion();
    });
</script>
<script language='javascript'>
    function changeContent(tablecell) {
        //alert(tablecell.firstChild.nodeValue);
        var newInfo = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\"" + tablecell.innerHTML + "\">";
        tablecell.innerHTML = newInfo;
        tablecell.firstChild.focus();
    }
    function submitNewName(textfield) {
        //alert(textfield.value);
        textfield.parentNode.innerHTML = textfield.value;
    }
</script>
<script language="JavaScript">

<!--    Begin
    function addRow(id) {

      // $("#testing").after("<li ondblclick='javascript:changeContent(this);' class='ui-state-default'>Add New Menu Option</li>");
       // $("<li ondblclick='javascript:changeContent(this);' class='ui-state-default'>Add New Menu Option</li>").appendTo('#sortable');

        
        var tbody = document.getElementById
        (id).getElementsByTagName("TBODY")[0];
        var row = document.createElement("TR")
       
        var td5 = document.createElement("TD")
        var order = document.createElement("input");
        order.setAttribute("type", "text");
        order.setAttribute("size", "3");
        td5.appendChild(order);
       
        var td1 = document.createElement("TD")
        td1.setAttribute('ondblclick', 'javascript:changeContent(this)');
        td1.appendChild(document.createTextNode("Enter New Menu Item"))
        
        var td2 = document.createElement("TD")
        td2.appendChild(document.createTextNode("Add Description"))
        td2.setAttribute('ondblclick', 'javascript:changeContent(this)');

        var td3 = document.createElement("TD")
        var selection = document.createElement("select");
        var small = document.createTextNode("Small");
        var medium = document.createTextNode("Meidum");
        var large = document.createTextNode("Large");
        var o = document.createElement('option');
        var o2 = document.createElement('option');
        var o3 = document.createElement('option');
        o.value="samll";
        o.appendChild(small);
        o2.appendChild(medium);
        o3.appendChild(large);
        selection.appendChild(o);
        selection.appendChild(o2);
        selection.appendChild(o3);
        td3.appendChild(selection);

      
       
       
        var td6 = document.createElement("TD")
        var check = document.createElement("input");
        check.setAttribute("type", "checkbox");
        td6.appendChild(check);
        var td4 = document.createElement("TD")
        var price = document.createElement("input");
        price.setAttribute("type", "text");
        price.setAttribute("size", "3");
        td4.appendChild(price);
   

        row.appendChild(td5);
        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
        row.appendChild(td4);
        row.appendChild(td6);
        tbody.appendChild(row);
    }
//  End -->


    function addOlRow() {
        $("<li ondblclick='javascript:changeContent(this);' class='ui-state-default'>Add New Menu Option</li>").appendTo('#sortable');
    }



</script>

<script>
    $(function () {
        $("#sortable").sortable({
            revert: true
            });
        $("#draggable").draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
        $("td, tr").disableSelection();
    });
 
</script>
<body>
    <div class="menu" id="accordion">
        <h3><a href="#">Cafe Information</a></h3>
        <div id="cafe info">
            Cafe Name: <input type="text" id="cafeName"/> <br /> <br />
           Description: <br /><br />
           <textarea id= "Description" rows= "5" cols="200"></textarea> <br /><br />
           Hours: <input type="text" /> to <input type="text" />
           Active: <input type="checkbox" />

        </div>
        <h3>
            <a href="#">Breakfast</a></h3>
     

        <div id="breakfast">
             <p>
                Double click to edit text</p>
            <table id="sortable" border = "1" style="margin-top:5px">
                <tr><th>Order</th><th>Menu Item</th><th>Description</th><th>Size</th><th>Price</th><th>Active</th>
              
                </tr>
                <tr>
                <td><input type="text" size="3" name="order" value="1" /></td>
                    <td ondblclick="javascript:changeContent(this);"> Chicken Soup </td>
                    <td ondblclick="javascript:changeContent(this);">warm delicious soup</td>
                       <td><select id="size"><option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
                </select> 
                </td>
              <td><input type="text" size="3" id="price" value="1.90" /></td>
           

              <td><input type="checkbox" name="active"/></td>
            
                </tr>
            </table>
            
            <button onclick="javascript:addRow('sortable');">
                Add Menu Option</button>
        </div>
          
        <h3>
            <a href="#">Lunch</a></h3>
       <div id="Lunch">
             <p>
                Double click to edit text</p>
            <table id= "Table" class="table-width">
                <tr><th>Order</th><th>Menu Item</th><th>Description</th><th>Size</th><th>Price</th><th>Active</th>
              
                </tr>
                <tr>
                <td><input type="text" size="3" name="order" value="1" /></td>
                    <td ondblclick="javascript:changeContent(this);"> Chicken Soup </td>
                    <td ondblclick="javascript:changeContent(this);">warm delicious soup</td>
                       <td><select id="Select1"><option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
                </select> 
                </td>
              <td><input type="text" size="3" id="Text1" value="1.90" /></td>
           

              <td><input type="checkbox" name="active" value="Bike" /></td>
            
                </tr>
            </table>
            <button onclick="javascript:addRow('Table');">
                Add Menu Option</button>
        </div>
        <h3>
            <a href="#">Dinner</a></h3>
        <div id="dinner">
            <table id="Table2" border="1">
                <tr><th>Order</th><th>Menu Item</th><th>Description</th><th>Size</th><th>Price</th><th>Active</th>
              
                </tr>
                <tr>
                <td><input type="text" size="3" name="order" value="1" /></td>
                    <td ondblclick="javascript:changeContent(this);"> Chicken Soup </td>
                    <td ondblclick="javascript:changeContent(this);">warm delicious soup</td>
                       <td><select id="Select2"><option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
                </select> 
                </td>
              <td><input type="text" size="3" id="Text2" value="1.90" /></td>
           

              <td><input type="checkbox" name="active" value="Bike" /></td>
            
                </tr>
            </table>
            <button onclick="javascript:addRow('Table2');">
                Add Menu Option</button>
        </div>
        <h3>
            <a href="#">3rd Shift</a></h3>
        <div id="3rdShift">
            <table id="Table3" class="table-width">
                <tr><th>Order</th><th>Menu Item</th><th>Description</th><th>Size</th><th>Price</th><th>Active</th>
              
                </tr>
                <tr>
                <td><input type="text" size="3" name="order" value="1" /></td>
                    <td ondblclick="javascript:changeContent(this);"> Chicken Soup </td>
                    <td ondblclick="javascript:changeContent(this);">warm delicious soup</td>
                       <td><select id="Select3"><option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
                </select> 
                </td>
              <td><input type="text" size="3" id="Text3" value="1.90" /></td>
           

              <td><input type="checkbox" name="active" value="Bike" /></td>
            
                </tr>
            </table>
            <button onclick="javascript:addRow('Table3');">
                Add Menu Option</button>
        </div>
    </div>
</body>
